<template>
    <div :class="classes">
        <mj-radio 
            v-for="(item,index) in data" 
            :key="index" 
            v-model="groupValue" 
            :value="item.value"
            :disabled="disabled ? true : item.disabled"
            @change="_change(item)">
            {{item.label}}
        </mj-radio>
    </div>
</template>
<script>
import { prefixCls } from '../prefix'

export default {
    name: `${prefixCls}RadioGroup`,
    props: {
        value: {},
        modelValue: {},
        data: Array,
        type:String,
        size:String,
        disabled: Boolean
    },
    data(){
        return {
            prefixCls: prefixCls,
            groupValue: this.value
        }
    },
    computed: {
        classes() {
            return [
                `${prefixCls}-radio-group`,
                {
                    ['mj-radio-group-' + this.type]: this.type,
                    ['mj-radio-group-' + this.size]: this.size
                }
            ]
        }
    },
    methods: {
        _change(item) {
            this.$emit('input', item.value);
            this.$emit('change',item);
        }
    },
    watch: {
        // groupValue(v){
        //     this.$emit('input', v);
        //     this.$emit('change',v);
        // },
        value(v){
            this.groupValue = v
        }
    },
}
</script>